<template>
  <div class="real-auth">
    <Cell title="请您进行人脸识别认证"
      label="需要人脸识别来验证您的本人身份。您的个人信息将得到绝对保证，仅限于身份核验、安全检测等。" />
    <div style="margin: 52px auto; width: 240px;">
      <Image :src="Person" />
    </div>
    <Form ref="form">
      <CellGroup title="真实姓名">
        <Field v-model="params.certName"
          name="真实姓名" placeholder="请填写真实姓名" autocomplete="off"
          :rules="[{ required: true, message: '请填写真实姓名' }]" />
      </CellGroup>
      <CellGroup title="身份证号">
        <Field v-model="params.certNo" name="身份证号"
          placeholder="请填写身份证号" autocomplete="off" :rules="[
            { required: true, message: '请填写身份证号' },
            {
              // eslint-disable-next-line max-len
              pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
              message: '请填写正确的身份证号',
            },
          ]" />
      </CellGroup>
      <Cell title="温馨提示：">
        <template #label>
          <span>
            请确保此账户为您本人进行实人认证并使用，平台不支持为他人认证。
            若为他人进行认证，此账户后续所产生的一切法律责任，将由你与实际使用者共同承担，具体请参见
          </span>
          <span
            style="color: var(--van-primary-color);"
            @click="handleClick('UserService')">《用户服务协议》</span>
          <span>和</span>
          <span
            style="color: var(--van-primary-color);"
            @click="handleClick('PresentSell')">《礼品卡转让协议》</span>
        </template>
      </Cell>
    </Form>
    <div
      style="margin: 16px; flex-grow: 1; display: flex; flex-direction: column;">
      <Checkbox v-model="pageState.checked"
        style="margin-top: auto; margin-bottom: 10px;" label-disabled>
        <span style="font-size: 12px;">
          我已阅读并同意
          <span
            style="color: var(--van-primary-color);"
            @click="handleClick('AliCloudRealAuth')">
            《阿里云金融级实人认证隐私权政策》
          </span>
        </span>
      </Checkbox>
      <Button round block type="primary"
        style="margin-top: auto;" :loading="pageState.loading"
        @click="handleUpdate">
        提交
      </Button>
    </div>
  </div>
</template>
<!--  -->
<script setup lang="ts">
import {
  Button,
  Cell, CellGroup, Checkbox, Field, Form, Image,
} from 'vant';
import { useRouter } from 'vue-router';

import Person from '@/assets/images/person.png';

import useRealAuth from '../hooks/useRealAuth';

const router = useRouter();
const {
  params, handleUpdate, form, pageState,
} = useRealAuth();

const handleClick = (name: string) => {
  router.replace({ name });
};
</script>
<style lang="less" scoped>
.real-auth {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
